//系统管理 - 用户管理

import React, { Component } from 'react';
import { LocaleProvider, Form , Row, Col, Table, Icon, Input, Tag, Button, Radio } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import TitleBtn from '../../../components/TitleBtn';

const FormItem = Form.Item;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    name: '王晶晶',
    userStatus: ['正常'],
    userName: '15961293352',
    role: '[白鲨钱包-审核2-审核专员]',
    createTime: '2018-12-11 15:11:28',
    cz: ''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class User extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
    const { getFieldDecorator } = this.props.form;
    
		return (
      <LocaleProvider locale={zh_CN}>
        <div className='apply'>
          <div>
            <Icon type="appstore" />
            <span className="apply-font">用户管理</span>
            <TitleBtn />
            <div className="btn">
              <Button icon="plus" size="small">新增</Button>
            </div>
            <div className="btn-change">
              <Radio.Group defaultValue="auditOfficer" size="small">
                <Radio.Button value="auditOfficer">审核专员</Radio.Button>
                <Radio.Button value="auditSupervisor">审核主管</Radio.Button>
                <Radio.Button value="MOOfficer">MO专员</Radio.Button>
                <Radio.Button value="MOSupervisor">MO主管</Radio.Button>
                <Radio.Button value="collectOfficer">催收专员</Radio.Button>
                <Radio.Button value="collecterSupervisor">催收主管</Radio.Button>
                <Radio.Button value="channelOfficer">渠道专员</Radio.Button>
                <Radio.Button value="channelSupervisor">渠道主管</Radio.Button>
                <Radio.Button value="productSupervisor">产品主管</Radio.Button>
                <Radio.Button value="admin">超级管理员</Radio.Button>
              </Radio.Group>
            </div>
          </div>
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('userName', {
                      rules: [{ required: true, message: 'Please input your userName!' }],
                    })(
                      <Input placeholder="登录名" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='姓名' align='center' dataIndex='name' width='80' />
              <Column title='用户状态' align='center' dataIndex='userStatus' width='80' 
                render={userStatus => (
                  <span>
                    <Tag color="green" key='userStatus'>{userStatus}</Tag>
                  </span>
                )} />
              <Column title='登录名' align='center' dataIndex='userName' width='80' />
              <Column title='角色' align='center' dataIndex='role' width='80' />
              <Column title='创建时间' align='center' dataIndex='createTime' width='80' />
              <Column title='操作' align='center' dataIndex='cz' width='80' 
                render={cz => (
                  <span>
                    <Tag color="orange" key='pDeploy'>编辑</Tag>
                    <Tag color="red" key='proDefinition'>删除</Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

const UserForm = Form.create()(User);

export default UserForm;